<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="主要配置" name="MainConfig">
      <el-form-item label="默认商家名称：">
        <el-input v-model="configValue.defaultShopName" placeholder="请输入默认商家名称"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">全局不发货地区</el-divider>

      <el-form-item label="不发货地区：">
        <el-input v-model="notShippedName"
                  :autosize="{ minRows: 2, maxRows: 4}" :readonly="true"
                  placeholder="点击选择不发货地区"
                  type="textarea"
                  @click.native="handleShowAddressCheck">
        </el-input>
      </el-form-item>

    </el-tab-pane>
    <el-tab-pane label="私域配置" name="PrivateConfig">
      <el-form-item label="默认拿货价：">
        <el-input-number v-model="configValue.privatePriceCost" :min="0.01" :precision="2" :step="1" controls-position="right"/>
      </el-form-item>

      <el-form-item label="公司拿货价：">
        <el-input-number v-model="configValue.privatePriceCost2" :min="0.01" :precision="2" :step="1" controls-position="right"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">私域V3平级奖励配置</el-divider>

      <el-form-item label="平级奖励1：">
        <el-input-number v-model="configValue.privateLevelReward1" :min="0.01" :precision="2" :step="1" controls-position="right"/>
      </el-form-item>
      <el-form-item label="平级奖励2：">
        <el-input-number v-model="configValue.privateLevelReward2" :min="0.01" :precision="2" :step="1" controls-position="right"/>
      </el-form-item>
      <el-form-item label="平级奖励3：">
        <el-input-number v-model="configValue.privateLevelReward3" :min="0.01" :precision="2" :step="1" controls-position="right"/>
      </el-form-item>

    </el-tab-pane>
  </el-tabs>

  <!-- 地址选择弹窗 -->
  <AddressCheckDialog ref="addressCheckDialogRef" @selected="handleAddressSelected"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { GoodsFreight } from '@/api/api-shop.ts';
import { AddressCheckDialog } from '@/components/other';

defineOptions({name: 'ShopRuleConfig'})

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  notShippedList: {
    type: Array,
    default() {
      return []
    }
  }
});

const activeName = ref('MainConfig');

/** 重置数据 */
const handleResetData = () => {
  notShippedList.value = [];
  notShippedName.value = '';
  // 不发货地区显示
  handleAddressSelected(props.notShippedList, true);
};

// 提供对外方法
defineExpose({handleResetData});

/** 不发货地区数据 */
const notShippedList = ref<GoodsFreight[]>([]);
const notShippedName = ref('');
const notShippedCodeList = ref<number[]>([]);

/** 地址选择弹窗 */
const addressCheckDialogRef = ref<any>();
const handleShowAddressCheck = () => {
  addressCheckDialogRef.value?.open(notShippedCodeList.value);
};

/** 处理地址选择完成 */
const handleAddressSelected = (itemList?: any[], format = false) => {
  let list: GoodsFreight[] = [];
  let codeList: number[] = [];
  let nameList: string[] = [];

  if (itemList && itemList.length > 0) {
    for (let item of itemList) {
      nameList.push(item.name);
      codeList.push(item.code);
      list.push({code: item.code, name: item.name});
    }
  }

  // 非格式化 需要设置当前值
  if (!format) {
    notShippedList.value = list;
    props.notShippedList.splice(0, props.notShippedList.length);
    props.notShippedList.push(...list)
  }

  // 其他值处理
  notShippedName.value = nameList.join(' | ');
  notShippedCodeList.value = codeList;
};
</script>

<style lang="scss" scoped>

</style>
